<template>
	<view class="content">
		<view class="baoxiao-tab">
			<view class="tab-li" :class="check_status == item.check_status ?'active':''" v-for="(item,index) in tabList"
				:key="index" @click="orderTab(item)">
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="order-list" v-if="orderList.length > 0">
			<view class="order-li" @click="jump('/pages/xihead/xiinformation/xiinformation?id='+item.id+'&index='+index+'&check_status_dd='+check_status_dd)"
				v-for="(item,index) in orderList" :key="index">
				<view class="order-li-top">
					<text>提交时间：{{ item.createtime }}</text>
					<text class="type" v-if="check_status_dd == 0">待分配</text>
					<text class="type" v-if="check_status_dd == 1">待接单</text>
					<text class="type" v-if="check_status_dd == 2">维修中</text>
					<text class="type" v-if="check_status_dd == 3">待确认</text>
					<text class="type" v-if="check_status_dd == 4">已完成</text>
				</view>
				<view class="order-cen">
					<view style="font-weight: bold;font-size: 30rpx;margin-bottom: 10rpx;color: #333;">
						报修类目：{{item.classification_name}}</view>
					<view>维修地点：{{item.report}}</view>
				</view>
				<view class="order-bot">
					<!-- <view class=" btn2" v-if="item.check_status == 0">
						<text>去确定</text>
					</view> -->
					<view class=" btn1">
						<text>查看详情</text>
					</view>

				</view>
			</view>
		</view>
		<view class="" v-else style="margin-top: 15vh;">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				check_status: 0,
				pages: 1,
				last_page: 2,
				tabList: [{
						type: '',
						name: '待分配',
						check_status: 0
					},
				
					{
						type: '',
						name: '待接单',
						check_status: 1
					},
					{
						type: '',
						name: '维修中',
						check_status: 2
					},
					{
						type: '',
						name: '待确认',
						check_status: 3
					},
					{
						type: '',
						name: '已完成',
						check_status: 4
					},
				],
				orderList: [],
				check_status_dd:''//列表上状态
			}
		},
		onLoad(e) {
			this.getOrderList()
			let that = this
			uni.$on('weixiu', function(res) {
				that.pages = 1
				that.orderList = []
				that.getOrderList()
			})
		},
		onPullDownRefresh() {
			this.pages = 1
			this.orderList = []
			this.getOrderList()
		},
		//页面上拉函数
		onReachBottom() {
			if (this.last_page > this.pages) {
				this.pages++
				this.orderList = []
				this.getOrderList()
			}
		},
		methods: {
			// 
			orderTab(item) {
				this.check_status_dd = item.check_status
				this.pages = 1
				this.orderList = []
				this.check_status = item.check_status
				this.getOrderList()
			},

			// 获取报修订单
			getOrderList() {

				this.$u.post('department/list', {
					status: this.check_status,
					page: this.pages,
					size: 20
				}).then(res => {
					console.log(res)
					this.last_page = res.data.last_page
					this.orderList = res.data.data
				})
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		padding-top: 0;
	}
	.order-cen view{
		font-size: 34rpx !important;
	}
	.baoxiao-tab {
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 31rpx;
		height: 80rpx;
		margin: 0 -20rpx;
		margin-top: 5rpx;
		margin-bottom: 10rpx;
	
	}
	.tab-li{
		font-size: 39rpx;
	}
	.tab-li.active {
		font-weight: bold;
		color: #0055B0;
	}
	
	.order-li {
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background: #fff;
	}
	
	.order-li-top {
		height: 111rpx;
		font-size: 33rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #F7F7F9;
		padding: 0 20rpx;
		justify-content: space-between;
	}
	
	.order-cen {
		padding: 40rpx 20rpx;
		border-bottom: 1px solid #F7F7F9;
	
		view {
			color: #7C7C7C;
			font-size: 28rpx;
		}
	}
	
	.order-bot {
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	
		button {
			margin: 0;
		}
	
		padding: 0 20rpx;
	}
	
	.btn1,
	.btn2 {
		width: 150rpx;
		height: 65rpx;
		border: 1px solid #333;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 29rpx;
		font-weight: 500;
		margin-left: 30rpx !important;
	}
	
	.type {
		color: #0055B0;
	}
	
	.btn2 {
		color: #0055B0;
		border: 1px solid #0055B0;
	}
</style>
